<template>
  <div class="app-container">
    <el-row>
      <!-- 树结构 -->
      <el-col :span="7" :xs="24">
        <div class="mainbox-left">
          <div class="box-card">
            <monitorGroupLeft @treeClick="handleTreeClick" />
          </div>
        </div>
      </el-col>
      <el-col :span="17" :xs="24" style="padding-left: 0px">
        <div class="none2-border3 userlist mainbox">
          <div class="filter-container">
            <el-form ref="filterFormRef" :inline="true" :model="filterForm">
              <el-form-item label="监控名称" prop="monitorName">
                <el-input v-model.trim="filterForm.monitorName" placeholder="请输入监控名称"></el-input>
              </el-form-item>
              <el-form-item label="监控状态" prop="monitorSts">
                <el-select v-model.trim="filterForm.monitorSts" placeholder="请选择监控状态">
                  <el-option :label="'全部'" :value="''" />
                  <el-option v-for="dict in dict.type.monitorStatus" :key="dict.value" :label="dict.label"
                             :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-form>
            <div class="flex-1" />
            <div>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </div>
          <dt-table
            ref="DtTable"
            v-loading="loading"
            :table-opts="tableOpts"
            :pagination-data="{
              total: total,
              queryParams: filterForm
            }"
            @pagination="getList"
            @selection-change="selectionChange"
          >
          </dt-table>
        </div>
      </el-col>
    </el-row>
    <monitorTableModal ref="monitorTableModal" @success="getList" />
  </div>
</template>

<script>
import { getList, delVideoGroupMonitor } from '@/api/videoFusion/monitorGroup'
import monitorGroupLeft from './components/monitorGroupLeft'
import monitorTableModal from './components/monitorTableModal'

export default {
  components: { monitorGroupLeft, monitorTableModal },
  dicts: ['monitorStatus'],
  data() {
    return {
      filterForm: {
        monitorName: '',
        monitorSts: '',
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      total: 0,
      tableOpts: {
        rowKey: 'id',
        toolbarBtn: [
          {
            label: '播放',
            permission: ['MONITOR_GROUP_PLAY_BUTTON'],
            type: 'primary',
            icon: 'el-icon-video-play',
            click: () => {
              this.handlePlay()
            }
          },
          {
            label: '新增监控',
            permission: ['MONITOR_GROUP_ADD_BUTTON'],
            type: 'primary',
            icon: 'el-icon-plus',
            click: () => {
              this.handleAdd()
            }
          },
          {
            label: '删除',
            permission: ['MONITOR_GROUP_DEL_BUTTON'],
            type: 'primary',
            icon: 'el-icon-delete',
            click: () => {
              this.handleDel()
            }
          }
        ],
        tableData: [],
        firstTableCol: {
          select: true
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'monitorName',
            label: '监控名称',
            show: true
          },
          {
            prop: 'monitorCode',
            label: '监控编码',
            show: true
          },
          {
            prop: 'monitorSts',
            label: '监控状态',
            show: true,
            type: 'dict',
            formatter: (row) => { return this.dict.type.monitorStatus }
          }
        ],
        operator: {
          width: 250,
          operatorBtn: [
            {
              text: '查看监控',
              permission: ['MONITOR_GROUP_PLAY_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.viewMonitor(row) }
            },
            {
              text: '删除',
              permission: ['MONITOR_GROUP_DEL_BUTTON'],
              size: 'small',
              type: 'danger',
              click: (row, col, cellValue) => { return this.remove(row) }
            }
          ]
        }
      },
      selectionRow: [],
      groupId: ''
    }
  },
  methods: {
    remove(row) {
      this.$dtModal.confirm('是否要删除该监控？').then(() => {
        delVideoGroupMonitor({ ids: [row.id] }).then((res) => {
          this.$dtModal.msgSuccess(res.message)
          this.getList()
        })
      })
    },
    viewMonitor(row) {
      const url = this.$router.resolve({
        path: '/monitorPlay/playView',
        query: {
          monitorId: row.monitorId,
          playType: 2,
          videoCode: row.monitorCode,
          monitorName: row.monitorName,
          monitorAddr: row.monitorAddr
        }
      })
      window.open(url.href, '_blank')
    },
    handleDel() {
      if (this.selectionRow.length > 0) {
        this.$dtModal.confirm('是否要删除选中监控？').then(() => {
          const ids = this.selectionRow.map((item) => {
            return item.id
          })
          delVideoGroupMonitor({ ids }).then((res) => {
            this.$dtModal.msgSuccess(res.message)
            this.getList()
          })
        })
      } else {
        this.$dtModal.msgWarning('请至少选择一条监控数据')
      }
    },
    handlePlay() {
      if (this.selectionRow.length > 0) {
        const monitorIds = this.selectionRow.map((item) => {
          return item.monitorId
        })
        const url = this.$router.resolve({
          path: '/monitorPlay/playGroupView',
          query: {
            monitorIds,
            groupId: this.groupId,
            playType: 3
          }
        })
        window.open(url.href, '_blank')
      } else {
        this.$dtModal.msgWarning('请选择监控数据')
      }
    },
    handleAdd() {
      this.$refs.monitorTableModal.open(this.groupId)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        monitorName: '',
        monitorSts: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    selectionChange(val) {
      this.selectionRow = val
    },
    getList() {
      this.loading = true
      getList({ ...this.filterForm, groupId: this.groupId }).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.selectionRow = []
        // clearSelection
        this.$refs.DtTable.clearSelection()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleTreeClick(data) {
      this.selectionRow = []
      // this.$forceUpdate()
      this.groupId = data.id
      this.getList()
    }
  }
}
</script>
